<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>深圳大学物理与核工程虚拟仿真教学中心</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<style type="text/css">
input[type="submit"]{background:#0067ca;font-size:15px;color:#FFFFFF;border:0;text-shadow:0 -1px 0 #535353;margin:5px 5px 0 0;padding:0 0 3px 0;display:block;width:106px;height:35px;text-align:center;font-weight:bold;line-height:33px; border-radius:3px;}
input[type="button"]{background:#0067ca;font-size:15px;color:#FFFFFF;border:0;text-shadow:0 -1px 0 #535353;margin:5px 5px 0 0;padding:0 0 3px 0;display:block;width:106px;height:35px;text-align:center;font-weight:bold;line-height:33px; border-radius:3px;}
input.button_button{background:#0067ca;margin:0;width:106px;height:35px;border:0;font-size:15px;color:#FFFFFF;text-shadow:0 -1px 0 #535353;padding:0 0 3px 0;text-align:center;font-weight:bold;line-height:33px;cursor:pointer; display: inline-block; margin-right:30px; border-radius:3px;}

/*Tooltips*/
.tooltips_main{position:absolute;left:0;margin:-5px 0 0 2px;z-index:999;}
.tooltips_box,.tooltips,.msg{display:inline-block;*display:inline;*zoom:1;position:relative;border-style:solid;border-color:#FF1F1F;}
.tooltips,.msg{border-width:0 1px;*left:-2px;background-color:#FFCFCF;}
.tooltips_box{border-width:1px;line-height:1.5;}
.tooltips{margin:0 -2px;}
.msg{margin:1px -2px;padding:0 6px;color:#2F2C2C;text-shadow:0 1px 0 #FFFFFF;font-size:12px;}
.ov{background:url('images/tri.gif') no-repeat scroll 0 0 transparent;position:absolute;left:30%;overflow:hidden;width:15px;height:15px;margin:16px 0 0 0;display:inline;}
/*regist*/
.register .form_submit{border-bottom:1px dotted #0f62c5;}
.register .form_submit .fieldset .field-group{min-height:55px;}
.register .form_submit .fieldset .field-group .title{float:left;width:120px;text-align:right;margin:4px 0 0 0;font-size:14px;}
.register .form_submit .fieldset .field-group .control-group{float:left;width:300px;margin:0 10px;}
.register .form_submit .fieldset .field-group .tips{float:left;width:250px;color:#8E8E8E;}
.register .div_submit{width:100%;margin:10px 0; text-align:center;}

/*end regist*/
.fieldset .input_add_background{height:30px;width:112px;float:left;margin:0 2px 0 0;}
.fieldset .input_add_background input.register_input_ot{background-color:#f9f9f9;border:1px solid #ccc; border-radius:3px;color:#4F4F4F;font-size:12px;height:18px;outline:medium none;width: 100px;padding:5px 10px;}
.fieldset .input_add_long_background{height:30px;width:286px;float:left;margin:0 0 15px 0;display:inline;}
.fieldset .input_add_long_light_background{height:30px;width:286px;float:left;}
.fieldset .input_add_long_background input.register_input{background-color:#f9f9f9;border:1px solid #ccc; border-radius:3px;color:#4F4F4F;font-size:12px;height:18px;outline:medium none;width: 270px;padding:5px 10px;}
.fieldset .input_text{display:inline-block;position:absolute;vertical-align:top;margin:6px 0 0 10px;z-index:2;font-style:italic;color:#BFBFBF;}
.select-style {background-color: #f9f9f9; border:1px solid #ccc; border-radius:3px; color: #4F4F4F; font-size: 12px; height: 30px; outline: medium none; width: 270px; padding: 1px;}
.textarea-style {background-color: #f9f9f9; border:1px solid #ccc; border-radius:3px; color: #4F4F4F; font-size: 12px; outline: medium none; width: 270px; height: 58px; padding: 1px; }
.fieldset .input_add_long_background input.time_input{background-color:#f9f9f9;border:1px solid #ccc; border-radius:3px;color:#4F4F4F;font-size:12px;height:18px;outline:medium none;width: 30px;padding:5px 10px; text-align:center;}


</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<div id="hearder2" class="clearfix">
	<div class="logo">
   	  <img src="">
  </div>
  <div class="logo-name">迎新网</div>
    <div class="form-tools">
   	  <form id="search" name="search" method="post">
      	<div class="tools-link">
        	<a href="login.html" target="_blank">学生登录入口</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        	<a href="login.html" target="_blank">老师登录入口</a>
        </div>
        <div class="search-box">
            <input type="text" name="textfield" id="textfield" class="input-text" placeholder="请输入搜索关键词">
            <input type="image" src="images/search.png" class="input-submit" />
        </div>
  	  </form>
    </div>
</div>
<div id="menu-box" class="clearfix">
	<ul>
		<li><a href="index2.html">迎新首页</a></li>
	    <li><a href="liaojiedaxue.html">了解大学</a></li>
	    <li><a href="jiazaidaxue.html">家在大学</a></li>
	    <li><a href="xuezaidaxue.html">学在大学</a></li>
	    <li><a href="zoujindaxue.html">走进大学</a></li>
	    <li><a href="yxgg.html">迎新公告</a></li>
	    <li><a href="yxxz.html">迎新须知</a></li>
	    <li><a href="yuanxijieshao.html">院系介绍</a></li>
	</ul>
</div>

<div id="slider-box" style="background:url(images/slider4.jpg) center center;"></div>
<!-- detail -->
<div id="detail2-box" class="clearfix">
	<div class="tit-80"><a href="list-text2.html">新闻中心</a> - 查看详情</div>
    <div class="tabula-box">
    	<div class="max-tit">新闻中心</div>
        <ul>
            <li><a href="#">新闻文章类型1</a></li>
            <li><a href="#">新闻文章类型2</a></li>
            <li><a href="#">新闻文章类型3</a></li>
            <li><a href="#">新闻文章类型4</a></li>
            <li><a href="#">新闻文章类型5</a></li>
            <li><a href="#">新闻文章类型6</a></li>
            <li><a href="#">新闻文章类型7</a></li>
            <li><a href="#">新闻文章类型8</a></li>
            <li><a href="#">新闻文章类型9</a></li>
        </ul>
    </div>
    
    <div class="content-box">
    	<h1>公用表单页面</h1>
        <div class="content">
<!-- form -->
<div class="body_main clearfix"> 
		<div id="register" class="register clearfix">
			<form id="form" action="#" method="post" onSubmit="return check();">
				<div id="form_submit" class="form_submit clearfix">
					<div class="fieldset">
					
						<div class="field-group">
							<label class="required title">手机号码</label>
							<span class="control-group" id="mobile_input">
								<div class="input_add_long_background">
									<input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" onblur="__changeUserName('mobile');">
								</div>
							</span>
							<label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
						</div>
						
						<div class="field-group">
							<label class="required title">邮箱</label>
							<span class="control-group" id="email_input">
								<div class="input_add_long_background">
									<input class="register_input" type="text" id="email" name="email" maxLength="50" value="" onblur="__changeUserName('email');">
								</div>
							</span>
							<label class="tips">请输入您常用的邮箱</label>
						</div>
						<div class="field-group">
							<label class="required title">科系名称</label>
							<span class="control-group" id="email_input">
								<div class="input_add_long_background">
                                    <select name="select" id="select" class="register_input select-style">
                                      <option value="" selected>--- 选择科系名称 ---</option>
                                      <option value="物理系">物理系</option>
                                      <option value="应用物理系">应用物理系</option>
                                      <option value="核科学与技术系">核科学与技术系</option>
                                      <option value="物理教学实验中心">物理教学实验中心</option>
                                      <option value="大学物理教学部">大学物理教学部</option>
                                      <option value="核技术应用研究所">核技术应用研究所</option>
                                    </select>
								</div>
							</span>
							<label class="tips">请选择科系</label>
						</div>
						
						<div class="field-group">
							<label class="required title">单选框</label>
							<span class="control-group" style="line-height:28px;">
								<input id="radio1" type="radio" value="1" name="username" checked>
								<span style="margin-right:10px;">选项一</span>
								<input id="radio1" type="radio" value="2" name="username">
								<span style="margin-right:10px;">选项二</span>
							</span>
							<label class="tips" style="margin-bottom:5px;" id="tooltext1">请选择单选项</label>
						</div>
						<div class="field-group">
						  <label class="required title">复选框</label>
							<span class="control-group" style="line-height:28px;">
								<input type="checkbox" name="checkbox1" id="checkbox1" value="1">
								<span style="margin-right:10px;">选项一</span>
								<input type="checkbox" name="checkbox1" id="checkbox1" value="2">
								<span style="margin-right:10px;">选项二</span>
							</span>
							<label class="tips" style="margin-bottom:5px;" id="tooltext1">请选择多选项</label>
						</div>
						
						<div class="field-group">
							<label class="required title">设置密码</label>
							<span class="control-group" id="password1_input">
								<div class="input_add_long_background">
									<input class="register_input" type="password" id="password1" name="password1" maxLength="20" value="" onblur="checkPwd1(this.value);" />
								</div>
							</span>
							<label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
						</div>
                        <!-- 时间段选择开始 -->
						<div class="field-group">
							<label class="required title">预约时段</label>
							<span class="control-group">
								<div class="input_add_long_background">
									<input class="time_input" type="text" id="time1" name="time1" value="" />
                                    <input class="time_input" type="text" id="time2" name="time2" value="" />
                                    <input class="time_input" type="text" id="time3" name="time3" value="" />
                                    <input class="time_input" type="text" id="time4" name="time4" value="" />
								</div>
							</span>
							<label class="tips">预约时段</label>
						</div>
						<!-- 时间段选择结束 -->
						<div class="field-group">
							<label class="required title">验证码</label>
							<span class="control-group" id="code_input">
								<div class="input_add_background" style="margin-right:15px;">
									<input class="register_input_ot" type="text" id="code" name="code" max_length="6" value="" onblur="checkAuthCode(this.value);">
								</div>
                                <img src="images/yzm.gif">
							</span>
							<label class="tips">请输入图片显示的验证码</label>
						</div>
						<div class="field-group">
						  <label class="required title">多行文本框</label>
							<span class="control-group" id="textarea1">
								<textarea name="textarea" id="textarea" class="textarea-style"></textarea>
							</span>
							<label class="tips" style="margin-bottom:5px;" id="tooltext1">输入多行文本内容</label>
						</div>

					</div>
					
				</div>
			  	<div id="div_submit" class="div_submit">
                    <input type="reset" name="reset" id="reset" value="重置" class='button_button disabled'>
                    <input id="submit" type="submit" value="提交" class='button_button disabled'>
				</div>
			</form>
		</div>
</div>

<!-- form end -->
        </div>
    </div>
</div>
<!-- div5 -->
<div id="div5" class="clearfix">
    <div class="link-box">
    	<span>友情链接：</span>
        <select onChange="frlink(this)" name="select" class="select-link">
            <option selected>--- 教育类网站 ---</option>
            <option value="http://www.veryhuo.com">烈火网</option>
            <option value="http://www.sina.com.cn">新浪网</option>
            <option value="http://www.163.com">网易</option>
        </select>
        <select onChange="frlink(this)" name="select" class="select-link">
            <option selected>--- 政府类网站 ---</option>
            <option value="http://www.china.com">中华网</option>
            <option value="http://www.sina.com.cn">新浪网</option>
            <option value="http://www.163.com">网易</option>
        </select>
        <select onChange="frlink(this)" name="select" class="select-link">
            <option selected>--- 校园类网站 ---</option>
            <option value="http://www.veryhuo.com">烈火网</option>
            <option value="http://www.sina.com.cn">新浪网</option>
            <option value="http://www.163.com">网易</option>
        </select>
        <select onChange="frlink(this)" name="select" class="select-link">
            <option selected>--- 其它类网站 ---</option>
            <option value="http://www.veryhuo.com">烈火网</option>
            <option value="http://www.sina.com.cn">新浪网</option>
            <option value="http://www.163.com">网易</option>
        </select>
    </div>
</div>
<div id="div6">Copyright &copy; 2016 物理与核工程虚拟仿真教学中心 All rights reserved.</div>
<script type="text/javascript">
function __changeUserName(of){
	var username=$('#'+of).val();
	if(of=='email'){
		if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
			showTooltips('email_input','请输入正确的Email地址');
			return;
		}					
	}else{
		if(username=='' || !isMobilePhone(username)) {
			showTooltips('mobile_input','请输入正确的手机号码');
			return;
		}
	}
}

function checkPwd1(pwd1) {
	if (pwd1.search(/^.{6,20}$/) == -1) {
		showTooltips('password1_input','密码为空或位数太少');
	}else {
		hideTooltips('password1_input');
	}
}	

function checkEmail(email) {
	if (email.search(/^.+@.+$/) == -1) {
		showTooltips('email_input','邮箱格式不正确');
	}else {
		hideTooltips('email_input');
	}
}

function checkAuthCode(authcode) {
	if (authcode == '' || authcode.length != 6) {
		showTooltips('code_input','验证码不正确');
	}else {
		hideTooltips('code_input');
	}     
}

function check() {
	hideAllTooltips();
	var ckh_result = true;
	if ($('#email').val() == '') {
		showTooltips('email_input','邮箱不能为空');
		ckh_result = false;
	}
	if ($('#password1').val() == '') {
		showTooltips('password1_input','密码不能为空');
		ckh_result = false;
	}      
	if($('#mobile').val()=='' || !isMobilePhone($('#mobile').val())) {            
		showTooltips('mobile_input','手机号码不正确');
		ckh_result = false;
	}
	if ($('#code').val() == '' || $('#code').val().length !=6) {
		showTooltips('code_input','验证码不正确');
		ckh_result = false;
	}
	if ($('#verify').attr('checked') == false){
		showTooltips('checkbox_input','对不起，您不同意Webluker的《使用协议》无法注册');
		ckh_result = false;
	}
	return ckh_result;
}

function checkMobilePhone(telphone) {
	if(telphone=='' || !isMobilePhone(telphone)) {
		showTooltips('mobile_input','请输入正确的手机号码');
	}else{
		hideTooltips('mobile_input');
	}
}

function isMobilePhone(value) {
	if(value.search(/^(\+\d{2,3})?\d{11}$/) == -1)
	return false;
	else
	return true;
} 
</script>
</body>
</html>
